<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!-- 선택 방식 결정 -->
<div *ngIf="isShow" class="ddp-wrap-setting">
  <div class="ddp-wrap-edit">
    <label class="ddp-label-type">{{'msg.board.li.sel.type'|translate}}</label>
    <div class="ddp-ui-edit-option ">
      <ul class="ddp-list-buttons">
        <li [ngClass]="{'ddp-selected' : isSingleSelect(targetFilter)}"
            (click)="setSelectorType(targetFilter, 'SINGLE')" >
          {{'msg.board.li.single' | translate}}
        </li>
        <li [ngClass]="{'ddp-selected' : !isSingleSelect(targetFilter)}"
            (click)="setSelectorType(targetFilter, 'MULTI')" >
          {{'msg.board.li.multiple' | translate}}
        </li>
      </ul>
    </div>
  </div>
  <div class="ddp-data-form" style="float:right; margin-top:10px;">
    {{'msg.board.li.filter.cnt' | translate}}:
    <input type="text" class="ddp-data-input"
           [ngModel]="itemShowCnt"
           (keyup)="changeShowNum($event)"
           input-mask="number"
           style="width: 80px; border:none; border-bottom: 1px solid #d7d8dc; background-color:#f4f6fc; font-size:12px; text-align: center">
  </div>
</div>
<!-- // 선택 방식 결정 -->

<!-- 기능 버튼 및 목록 영역 -->
<div *ngIf="isShow" class="ddp-filter-form">
  <!-- 상단 영역 -->
  <div class="ddp-option-type">
    <div class="ddp-option-in">
      <!-- 상단 버튼 영역 -->
      <div class="ddp-option-btn">
        <!-- 상단 목록 필터링 설정 영역 -->
        <div (clickOutside)="targetFilter['isShowCandidateFilter'] = false"
             [class.ddp-selected]="targetFilter['isShowCandidateFilter']" class="ddp-wrap-edit-set ">
          <a (click)="toggleConfigFilteringLayer( targetFilter )"
             href="javascript:" class="ddp-btn-filter ddp-btn-box"></a>
          <!-- hover -->
          <div class="ddp-ui-tooltip-info">
            <em class="ddp-icon-view-top"></em> {{'msg.board.ui.filter.filtering' | translate}}
          </div>
          <!-- //hover -->

          <!-- 필터링 조건 설정 영역 -->
          <div class="ddp-ui-edit-set">
            <label class="ddp-label-title">
              Matcher
            </label>
            <ul class="ddp-list-buttons" *ngFor="let type of matcherTypeList">
              <li [ngClass]="{'ddp-selected': selectedMatcherType.value === type.value}" (click)="onChangeMatcherType(type)">
                {{type.label}}
              </li>
            </ul>
            <div class="ddp-edit-set-contents">
              <div class="ddp-form-edit-set ddp-clear">
                <!-- 와일드카드 설정 영역 -->
                <div *ngIf="isWildCardMatcher()">
                  <label>
                    <span *ngIf="isSetWildCard( wildcard )" class="ddp-data-info">
                      {{getWildCardDesc(wildcard)}} <span class="ddp-data2">'{{wildcard.value}}'</span>
                    </span>
                    <a *ngIf="isSetWildCard( wildcard )" (click)="$event.stopPropagation();resetWildcard(wildcard)"
                       href="javascript:" class="ddp-btn-reset ddp-hover-tooltip" >
                      <!-- tooltip -->
                      <div class="ddp-ui-tooltip-info ddp-down">
                        <em class="ddp-icon-view-top"></em> {{'msg.page.btn.reset' | translate}}
                      </div>
                      <!-- // tooltip -->
                    </a>
                  </label>
                  <div class="ddp-form-edit-set ddp-clear">
                    <div class="ddp-col-4">
                      <input type="text" class="ddp-input-typebasic" [(ngModel)]="wildcard.value" />
                    </div>
                    <div class="ddp-col-3">
                      <component-select
                        #wildCardContains
                        [array]="wildCardTypeList"
                        [viewKey]="'name'"
                        (onSelected)="wildcard.contains = $event ? $event['value'] : null">
                      </component-select>
                    </div>
                  </div>
                </div>
                <!-- // 와일드카드 설정 영역 -->

                <!-- 정규식 설정 영역 -->
                <div *ngIf="isRegularExpressionMatcher()">
                  <input type="text" class="ddp-input-typebasic" [(ngModel)]="regExpr.expr" />
                </div>
                <!-- // 정규식 설정 영역 -->
              </div>
            </div>

            <!-- 컨디션 설정 영역 -->
            <label class="ddp-label-title">
              {{'msg.board.th.filter.cond' | translate}}
              <span *ngIf="isSetCondition( condition )" class="ddp-data-info">
                <span class="ddp-data"> {{condition.field ? condition.field : ''}}</span>
                {{getConditionDesc(condition)}}
                <span class="ddp-data2">{{condition.value}}</span>
              </span>
              <a *ngIf="isSetCondition( condition )" (click)="$event.stopPropagation();resetCondition(condition)"
                 href="javascript:" class="ddp-btn-reset" >
                <!-- tooltip -->
                <div class="ddp-ui-tooltip-info ddp-down">
                  <em class="ddp-icon-view-top"></em> {{'msg.page.btn.reset' | translate}}
                </div>
                <!-- // tooltip -->
              </a>
            </label>

            <div class="ddp-form-edit-set ddp-clear">
              <div class="ddp-col-4">
                <component-select
                  #conditionField
                  [array]="measureFields"
                  [viewKey]="'name'"
                  [usePlaceholder]="true"
                  [unselectedMessage]="'msg.board.filter.ui.select-measure' | translate"
                  (onSelected)="condition.field = $event ? $event['name'] : null">
                </component-select>
              </div>
              <div class="ddp-col-3">
                <component-select
                  #conditionAggregation
                  [array]="aggregationTypeList"
                  [viewKey]="'name'"
                  (onSelected)="condition.aggregation = $event ? $event['value'] : null">
                </component-select>
              </div>
              <div class="ddp-col-2">
                <component-select
                  #conditionInequality
                  [array]="conditionTypeList"
                  [viewKey]="'name'"
                  (onSelected)="condition.inequality = $event ? $event['value'] : null"
                ></component-select>
              </div>
              <div class="ddp-col-3">
                <input type="text" input-mask="number" class="ddp-input-typebasic" [(ngModel)]="condition.value"/>
              </div>
            </div>
            <!-- // 컨디션 설정 영역 -->

            <!-- 리미트 설정 영역 -->
            <label class="ddp-label-title">
              {{'msg.board.ui.filter.limitation' | translate}}
              <span *ngIf="isSetLimit( limitation )" class="ddp-data-info">
                <span class="ddp-data">{{ getLimitDesc1(limitation )}} {{limitation.value}} of&nbsp;</span>
                <span class="ddp-data2"> {{getLimitDesc2(limitation)}} ( {{limitation.field}} ) </span>
              </span>
              <a *ngIf="isSetLimit( limitation )" (click)="$event.stopPropagation();resetLimitation(limitation)"
                 href="javascript:" class="ddp-btn-reset" >
                <!-- tooltip -->
                <div class="ddp-ui-tooltip-info ddp-down">
                  <em class="ddp-icon-view-top"></em> {{'msg.page.btn.reset' | translate}}
                </div>
                <!-- //tooltip -->
              </a>
            </label>

            <div class="ddp-form-edit-set ddp-clear">
              <div class="ddp-col-3">
                <component-select
                  #limitPosition
                  [array]="limitTypeList"
                  [viewKey]="'name'"
                  (onSelected)="limitation.position = $event ? $event['value'] : null"
                ></component-select>
              </div>
              <div class="ddp-col-2">
                <input type="text" input-mask="number" class="ddp-input-typebasic" [(ngModel)]="limitation.value"/>
              </div>
              <div class="ddp-col-4">
                <component-select
                  #limitField
                  [array]="measureFields"
                  [viewKey]="'name'"
                  [usePlaceholder]="true"
                  [unselectedMessage]="'msg.board.filter.ui.select-measure' | translate"
                  (onSelected)="limitation.field = ( $event ) ? $event['name'] : null">
                </component-select>
              </div>
              <div class="ddp-col-3">
                <component-select
                  #limitAggregation
                  [array]="aggregationTypeList"
                  [viewKey]="'name'"
                  (onSelected)="limitation.aggregation = $event ? $event['value'] : null"
                ></component-select>
              </div>
            </div>
            <!-- // 리미트 설정 영역 -->

            <!-- button -->
            <div class="ddp-pop-buttons">
              <a (click)="resetAll()" href="javascript:" class="ddp-btn-pop" style="margin-right: 2px;">
                <em class="ddp-btn-reset"></em>{{'msg.page.btn.reset' | translate}}
              </a>
              <a (click)="candidateWithValidation()" href="javascript:" class="ddp-btn-pop ddp-bg-gray">
                <em class="ddp-icon-checked"></em>{{'msg.page.btn.apply' | translate}}
              </a>
            </div>
            <!-- //button -->
          </div>
          <!-- // 필터링 조건 설정 영역 -->
        </div>
        <!-- // 상단 목록 필터링 설정 영역 -->

        <!-- 상단 목록 정렬 설정 영역 -->
        <div (clickOutside)="targetFilter['isShowCandidateSort'] = false"
             [class.ddp-selected]="targetFilter['isShowCandidateSort']" class="ddp-ui-sort ddp-btn-box">
          <a (click)="targetFilter['isShowCandidateSort'] = !targetFilter['isShowCandidateSort']"
             href="javascript:" class="ddp-icon-sort"></a>
          <!-- hover -->
          <div class="ddp-ui-tooltip-info">
            <em class="ddp-icon-view-top"></em> {{'msg.comm.ui.soring.order' | translate}}
          </div>
          <!-- //hover -->
          <!-- popup -->
          <div class="ddp-wrap-popup2">
            <ul class="ddp-list-popup">
              <li [class.ddp-selected]="sortBy.COUNT === targetFilter.sort.by && sortDirection.ASC === targetFilter.sort.direction">
                <a href="javascript:" (click)="sortCandidateValues(targetFilter, sortBy.COUNT, sortDirection.ASC );">
                  {{'msg.comm.ui.soring.frequency.asc' | translate}} <em class="ddp-icon-check"></em>
                </a>
              </li>
              <li [class.ddp-selected]="sortBy.COUNT === targetFilter.sort.by && sortDirection.DESC === targetFilter.sort.direction">
                <a href="javascript:" (click)="sortCandidateValues(targetFilter, sortBy.COUNT, sortDirection.DESC);">
                  {{'msg.comm.ui.soring.frequency.desc' | translate}} <em class="ddp-icon-check"></em>
                </a>
              </li>
              <li [class.ddp-selected]="sortBy.TEXT === targetFilter.sort.by && sortDirection.ASC === targetFilter.sort.direction">
                <a href="javascript:" (click)="sortCandidateValues(targetFilter, sortBy.TEXT, sortDirection.ASC );">
                  {{'msg.comm.ui.soring.alphnumeric.asc' | translate}} <em class="ddp-icon-check"></em>
                </a>
              </li>
              <li [class.ddp-selected]="sortBy.TEXT === targetFilter.sort.by && sortDirection.DESC === targetFilter.sort.direction">
                <a href="javascript:" (click)="sortCandidateValues(targetFilter, sortBy.TEXT, sortDirection.DESC);">
                  {{'msg.comm.ui.soring.alphnumeric.desc' | translate}} <em class="ddp-icon-check"></em>
                </a>
              </li>
            </ul>
          </div>
          <!-- //popup -->
        </div>
        <!-- // 상단 목록 정렬 설정 영역 -->

      </div>
      <!-- // 상단 버튼 영역 -->

      <!-- 검색 영역 -->
      <div class="ddp-option-search">
        <div (clickOutside)="inactiveSearchInput()"
             [class.ddp-search]="targetFilter['isShowSearch']"  [class.ddp-focus]="targetFilter['isShowSearch']"
             [class.ddp-warning]="isOverCandidateWarning"
             [class.ddp-nofilter]="isNoFiltering() && targetFilter['isShowSearch']"
             class="ddp-search-value" >
          <a (click)="candidateFromSearchText()" href="javascript:" class="ddp-btn-line">{{'msg.comm.ui.search-all' | translate}}</a>
          <div class="ddp-txt-nofilter">{{ 'msg.comm.ui.no.filtering' | translate }}</div>
          <div class="ddp-data-value" style="overflow: hidden;">
            <em class="icon-search"></em>
            <input #inputSearch type="text" placeholder="{{'msg.board.ui.search.item.name' | translate}}"
                   [(ngModel)]="searchText"
                   (focus)="targetFilter['isShowSearch'] = true"
                   (keyup)="setCandidatePage(1, true);" >
            <a *ngIf="searchText" (click)="searchText = '';candidateFromSearchText();" href="javascript:" class="ddp-btn-del"></a>
            <em class="icon-warning"></em>
            <!-- popup -->
            <div class="ddp-pop-warning" [innerHTML]="'msg.board.filter.limmited-alert' | translate : { value : candidateListSize }"></div>
            <!-- //popup -->
          </div>
        </div>
      </div>
      <!-- // 검색 영역 -->
    </div>

  </div>
  <!-- // 상단 영역 -->

  <!-- setting -->
  <div class="ddp-select-setting ddp-clear">
    <span class="ddp-data-total">{{ 'msg.comm.ui.total' | translate }} <strong>{{totalCount}}</strong></span>
    <ul class="ddp-list-select">
      <li *ngIf="!isSingleSelect(targetFilter)"><a href="javascript:" (click)="candidateSelectAll()">{{ 'msg.comm.ui.list.sel.all' | translate }}</a></li>
      <li>
        <a href="javascript:" (click)="candidateDeselectAll();">
          <span *ngIf="isSingleSelect(targetFilter)">{{ 'msg.comm.ui.list.desel' | translate }}</span>
          <span *ngIf="!isSingleSelect(targetFilter)">{{ 'msg.comm.ui.list.desel.all' | translate }}</span>
        </a>
      </li>
    </ul>

    <div class="ddp-setting">
      <div class="ddp-label-setting">
        <em class="ddp-icon-eye"></em>Turn all
      </div>
      <div class="ddp-setting-check">
        <a (click)="toggleAllCandidateValues(true)" href="javascript:">on</a>
        <a (click)="toggleAllCandidateValues(false)" href="javascript:">off</a>
      </div>
    </div>
  </div>
  <!-- //setting -->

  <!-- 아이템 목록 영역 -->
  <div class="ddp-box-item-search ddp-type-filter" [ngStyle]="{top : useDefineValue ? '188px' : '0px'}">
    <!-- 후보값 목록 표시 -->
    <ul class="ddp-list-checktype ddp-type-list" [ngStyle]="{bottom : useDefineValue ? '95px' : ''}">
      <li *ngIf="pageCandidateList == null || pageCandidateList.length == 0">
        <label style="display:inline-block; font-size:13px; color:#4b515b; vertical-align:bottom; word-break:break-all;">
          {{ 'msg.comm.ui.no.rslt' | translate }}
        </label>
      </li>
      <li *ngFor="let item of pageCandidateList" >
        <!-- check -->
        <label class="ddp-label-checkbox" *ngIf="!isSingleSelect(targetFilter)">
          <input type="checkbox"
                 (click)="candidateSelect(item, $event)"
                 [checked]="isCheckedItem(item)">
          <i class="ddp-icon-checkbox"></i>
          <span class="ddp-txt-checkbox">
              {{ ( null === item.name || 'null' === item.name ) ? '(Null)' : ( ( '' === item.name || undefined === item.name ) ? '(Empty)' : item.name ) }}
            <span class="ddp-data-valuenum">{{item.count}}</span>
            </span>
        </label>
        <!-- radio -->
        <label class="ddp-label-radio" *ngIf="isSingleSelect(targetFilter)">
          <input type="radio" name="candidateSingle_{{compUUID}}"
                 (click)="candidateSelect(item, $event)"
                 [checked]="isCheckedItem(item)">
          <i class="ddp-icon-radio"></i>
          <span class="ddp-txt-radio">
              {{ ( null === item.name || 'null' === item.name ) ? '(Null)' : ( ( '' === item.name || undefined === item.name ) ? '(Empty)' : item.name ) }}
            <span class="ddp-data-valuenum">{{item.count}}</span>
            </span>
        </label>
        <em (click)="candidateShowToggle(item)"
            class="{{isShowItem(item) ? 'ddp-icon-eyes2-on' : 'ddp-icon-eyes2-none'}}"></em>
        <em *ngIf="item.isDefinedValue" (click)="deleteDefinedValue(item)" class="ddp-icon-sclose2" ></em>
      </li>
    </ul>
    <!-- // 후보값 목록 표시 -->

    <!-- 선택 결과 표시 영역 -->
    <div class="ddp-data-result2"
         [ngStyle]="{bottom : useDefineValue ? '60px' : ''}" [class.sys-essential-result]="!useDefineValue">
      <!-- 목록 제한 및 페이징 영역 -->
      <div class="ddp-ui-values">
        <div class="ddp-data-values">
          <label class="ddp-label-check-value">
            <input (click)="targetFilter.showSelectedItem = !targetFilter.showSelectedItem;setCandidatePage(1, true);"
                   [checked]="targetFilter.showSelectedItem"
                   type="checkbox" >
            <i></i>
          </label>
          <ng-container *ngIf="targetFilter.showSelectedItem">
            {{ 'msg.board.filter.selected-values' | translate : { value : selectedValues.length } }}
          </ng-container>
          <ng-container *ngIf="!targetFilter.showSelectedItem">
            {{ 'msg.board.filter.all-values' | translate : { value : candidateListSize } }}
          </ng-container>
        </div>
        <!-- 페이징 영역 -->
        <div class="ddp-ui-page">
          <a (click)="setCandidatePage(currentPage-1)"
             [class.ddp-disabled]="1 === currentPage"
             href="javascript:" class="ddp-btn-prev"></a>
          <span class="ddp-data-page"><em>{{currentPage}}</em>/<em>{{lastPage}}</em></span>
          <a (click)="setCandidatePage(currentPage+1)"
             [class.ddp-disabled]="lastPage === currentPage"
             href="javascript:" class="ddp-btn-next"></a>
        </div>
        <!-- // 페이징 영역 -->
      </div>
      <!-- // 목록 제한 및 페이징 영역 -->

    </div>
    <!-- // 선택 결과 표시 영역 -->

    <!-- 사용자 정의 값 입력 영역 -->
    <div class="ddp-box-search">
      <component-input
        [value]="newCandidateName"
        [inputClass]="'ddp-input-typebasic'"
        [placeHolder]="'msg.board.ui.filter.defined-value.ph' | translate"
        (changeValue)="newCandidateName = $event"></component-input>
      <a href="javascript:" class="ddp-btn-solid3" (click)="addNewCandidateValue()">{{'msg.board.btn.add' | translate}}</a>
    </div>
    <!-- // 사용자 정의 값 입력 영역 -->

  </div>
  <!-- // 아이템 목록 영역 -->

</div>
<!-- // 기능 버튼 및 목록 영역 -->

<!--<div *ngIf="isNoData && isNoData" class="ddp-ui-empty">{{'msg.board.filter.ui.no-data' | translate}}</div>-->
